<template>
  <div class="numboxlist">
    <div v-for="(numitem, $index) in numvalues" :key="$index" class="numbox">
      <numbox :num="numitem.num" :hasdot="numitem.hasdot" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import type { Ref } from 'vue';
import { str2Num } from '@/utils';
import numbox from './numbox.vue';
type INumValueType = {
  num: number;
  hasdot: boolean;
};
const props = defineProps({
  value: {
      type: [Number, String],
      default: 0,
    },
    digitNum: {
      type: Number,
      default: 8,
    },
})
    let numvalues: Ref<INumValueType[]> = ref([]);

    let computeValues = () => {
      numvalues.value.length = 0;

      let valueStr = str2Num(props.value || 0).toString();
      console.log(valueStr, 'valueStr');
      let digitNum = str2Num(props.digitNum || 8);
      let targetStr = '';
      if (valueStr.length >= digitNum) {
        targetStr = valueStr.slice(valueStr.length - digitNum);
      } else {
        let diff = digitNum - valueStr.length;
        while (diff) {
          targetStr += '0';
          diff--;
        }
        targetStr += valueStr;
      }
      console.log(targetStr, 'targetStr');
      numvalues.value.length = 0;
      for (var index = 0; index < digitNum; index++) {
        numvalues.value.unshift({
          num: str2Num(targetStr[digitNum - index - 1]),
          hasdot: index > 0 && index % 3 === 0,
        });
      }
      console.log(numvalues.value, 'numvalues.value');
    };

    watch(
      () => props.value,
      () => {
        computeValues();
      }
    );

    computeValues();
</script>
<style lang="scss" scoped>
.numboxlist {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: space-between;

  .numbox {
    flex: 1;
  }
}
</style>
